<template>
	<view class="">
		<view class="zhuce">
			您好，欢迎注册！
		</view>
		<view class="center">
			<view class="top">
				<view class="top-top">
					<view class="top-top-left">
						您的姓名
					</view>
					<view class="top-top-right">
						<input class="input" type="text" v-model="userInfo.realname" placeholder="请输入姓名" placeholder-style="font-size: 24rpx;color: #AAAAAA;font-family: PingFang SC, PingFang SC;">
					</view>
				</view>
				<view class="top-top xian">
					<view class="top-top-left">
						手机号
					</view>
					<view class="top-top-right">
						<input type="number" v-model="userInfo.phone" placeholder="请填写手机号" placeholder-style="font-size: 24rpx;color: #AAAAAA;font-family: PingFang SC, PingFang SC;">
					</view>
				</view>
			</view>
			
			<view class="top margin">
				<view class="top-top">
					<view class="top-top-left">
						门店名称
					</view>
					<view class="top-top-right">
						<input class="input" v-model="userInfo.store" type="text" placeholder="请输入门店名称" placeholder-style="font-size: 24rpx;color: #AAAAAA;font-family: PingFang SC, PingFang SC;">
					</view>
				</view>
				<view class="top-top xian">
					<view class="top-top-left">
						所在地址
					</view>
					<view class="top-top-right">
						<input type="number" v-model="userInfo.address" placeholder="请选择地址" placeholder-style="font-size: 24rpx;color: #AAAAAA;font-family: PingFang SC, PingFang SC;" disabled>
					</view>
					<view class="top-top-right1" @click="getAddress">
						重新定位
					</view>
				</view>
				<view class="top-top xian">
					<view class="top-top-left">
						详细地址
					</view>
					<view class="top-top-right">
						<input class="input" type="text" v-model="userInfo.detail" placeholder="请填写详细地址" placeholder-style="font-size: 24rpx;color: #AAAAAA;font-family: PingFang SC, PingFang SC;">
					</view>
				</view>
			</view>
			
			
			<view class="top margin">
				<view class="">
					<view class="">
						上传资质
					</view>
					<view class="" @click="uploadpic">
						<image v-if="userInfo.qualifications==''" style="width: 140rpx;height: 140rpx;margin-top: 20rpx;" src="../../static/images/jia.png" mode=""></image>
						<image v-if="userInfo.qualifications!=''" style="width: 140rpx;height: 140rpx;margin-top: 20rpx;" :src="userInfo.qualifications" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="button-zhuce" @click="zhuceFn">
				注册
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQualifications
	} from "@/api/user.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				userInfo:{
					address:'',
					store:'',
					detail:'',
					realname:'',
					phone:'',
					qualifications:''
				}
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			if (!this.isLogin) toLogin();
		},
		methods:{
			getAddress() {
				let that=this
				console.log(111111111);
				uni.chooseLocation({
					success: (res)=> {
						console.log(res);
						 var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						        let myLocation = res.address.match(reg);
								// console.log(myLocation,'myLocation');
						        let provinceName = '';
						        let cityName = '';
						        let countryName = '';
						        if (myLocation != undefined && myLocation != null) {
						          provinceName = myLocation[0];
						          cityName = myLocation[1];
						          countryName = myLocation[2];
						        }
						      // console.log(provinceName,cityName,cityName);
						that.userInfo.address=provinceName+cityName+countryName
						// console.log(that.userInfo.address,'11111111111111');
						that.userInfo.detail=res.name
						
					},fail: (err) => {
						console.log(err)
					}

				});
			},
			getQualificationsFn(){
				let data=this.userInfo
				getQualifications(data).then((res)=>{
					let aa=res
console.log(aa,'aaaa');
				})
			},
			uploadpic: function() {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange('upload/image', (res) => {
					let userInfo = that.userInfo;
					if (userInfo !== undefined) {
						that.userInfo.qualifications = res.data.url;
					}
					console.log(that.userInfo,'that.userInfo11111111111');
					this.canvasStatus = false
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			chooseimgFn(){
				let that=this
				uni.chooseImage({
				  count: 1, // 最多选择一张图片
				  sourceType: ['album', 'camera'], // 只允许从相机选择
				  sizeType:['original', 'compressed'],
				   quality: 50,
				  success: (res) => {
				    console.log(res)
				    // const tempFilePaths = res.tempFilePaths[0]
				    // 在这里处理图片文件
					
						that.userInfo.qualifications=res.tempFilePaths[0]
					
				
				  }
				})
			},
			zhuceFn(){
				let that=this
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if(that.userInfo.realname==''){
					uni.showToast({
						title: '请输入姓名',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				 if(that.userInfo.phone==''){
					uni.showToast({
						title: '请输入手机号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if(!reg.test(that.userInfo.phone)){
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if(that.userInfo.store==''){
					uni.showToast({
						title: '请输入门店名称',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if(that.userInfo.address==''){
					uni.showToast({
						title: '请输入所在地址',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if(that.userInfo.detail==''){
					uni.showToast({
						title: '请输入详细地址',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if(that.userInfo.qualifications==''){
					uni.showToast({
						title: '请上传资质',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				console.log(this.userInfo,'this.userInfo');
				let data=this.userInfo
				getQualifications(data).then((res)=>{
				// let aa=res
				console.log(res.msg,'res.msg');
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
				that.userInfo={}
				setTimeout(()=>{
					uni.navigateBack(-1)
				},1000)
				
				// console.log(aa,'aaaa');
								})
			}
		}
	}
</script>

<style scoped lang="scss">
	.zhuce{
		margin-top: 28rpx;
		font-size: 48rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #000000;
		margin-bottom: 28rpx;
		margin-left: 3%;
	}
	.center{
		width: 94%;
		margin-left: 3%;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #333333;
		.button-zhuce{
			margin-top: 28rpx;
			height: 92rpx;
			background: #2ED689;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			line-height: 92rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.margin{
			margin-top: 28rpx;
		}
		.top{
			background-color: #fff;
			padding: 28rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.xian{
				border-top: 2rpx solid #F8F8F8;
				padding-top: 32rpx;
			}
			.top-top{
				display: flex;
				padding-bottom: 32rpx;
				.top-top-left{
					width: 30%;
				}
				.top-top-right{
					flex:1;
				}
				.top-top-right1{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #2ED689;
				}
			}
			
		}
	}
</style>